<script lang="ts">
export default {
  name: "Demo4",
};
</script>
<script setup lang="ts">
import Sortable from "sortablejs"
import { onMounted,ref } from "vue";
const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'jim',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'bob',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'angela',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
onMounted(()=>{
  var app:any = document.querySelector('.demo4123124dad .el-table__body tbody') as any;
  console.log(app)
  Sortable.create(app, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = tableData.value.splice(oldIndex, 1)[0];  //当前行
          tableData.value.splice(newIndex, 0, currRow);
    
        },
      });
})

</script>

<template>
  <div >  
    <el-table  class="demo4123124dad" :data="tableData" row-key="date" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table></div>
</template>

<style lang="less" scoped></style>
